<template>
    <div class="mainBody">
        <div>
            <Nav />
        </div>
        <div class="mainContainer">
            <div class="search_select">
                <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div style="padding-top: 10px;">
                    共找到{{ totalBooks }}条与“{{ keyword }}”相关的结果
                </div>
            </div>
            <el-divider />
            <div class="search_box">
                <div class="search_book">
                    <div class="search_book_item" v-for="(book, index) in currentPageBooks" :key="index">
                        <div class="search_img">
                            <div :style="{ backgroundImage: `url(${book.cover_url})` }" class="search_bookCover"
                                @click="navigateToBook(book.id)"></div>
                        </div>
                        <div class="search_bookInfo">
                            <p class="bookName1" @click="navigateToBook(book.id)">
                                {{ book.name }}
                            </p>
                            <p class="bookAuthor_hot_characterCount1">
                                <span @click="navigateToAuthor(book.author.author_id)" class="turnRed">
                                    {{ book.author.author_name }}
                                </span>
                                <span> | </span>
                                <span>
                                    {{ book.hot_number }}热度
                                </span>
                                <span> | </span>
                                <span>
                                    {{ book.word_count }}字
                                </span>
                            </p>
                            <p class="bookDescription1 turnRed" @click="navigateToBook(book.id)">
                                {{ cut(book.description, 40) }}
                            </p>
                            <p class="bookType1">
                                关键词:
                                <span v-for="(tag, index) in book.tag.slice(0, 5)" :key="index" class="turnRed" @click="navigateToCategory(tag)">
                                    {{ tag }}
                                    <span v-if="index < book.tag.slice(0, 5).length - 1"> , </span>
                                </span>
                            </p>
                        </div>

                        <Button2 class="search_read_button" @click="navigateToBook(book.id)">
                            <div>立即阅读</div>
                        </Button2>
                    </div>
                </div>
                <recommend class="search_recommend">
                </recommend>
            </div>

            <div class="search_pages">
                <el-pagination :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next"
                    :total="totalBooks" @current-change="handlePageChange" />
            </div>

        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getSearchResults } from '@/apis/getSearchResults';
import { useNavigation } from '@/utils/navigate.js';
import { cut } from '@/utils/cutText.js';
import { getCurrentInstance } from 'vue';
import '@/display/bookInfo.css';
import '@/display/mainBody.css';
import Button2 from '@/components/button2.vue';
import recommend from '@/components/trending.vue';

const { proxy } = getCurrentInstance();
const { navigateToCategory, navigateToBook, navigateToAuthor } = useNavigation(); //导入导航函数
const route = useRoute();
const keyword = ref(route.params.input || '');
const value = ref('1');

//选择栏的4个选项
const options = [
    { value: '1', label: '最新发布', },
    { value: '2', label: '最多阅读', },
    { value: '3', label: '最近更新', },
    { value: '4', label: '最多收藏', },
]

const currentPage = ref(1);  //默认第一页
const pageSize = ref(16);  //一页16个
const totalBooks = ref(0);
const books = ref([]);

//当前页的书籍
const currentPageBooks = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = startIndex + pageSize.value;
    return books.value.slice(startIndex, endIndex);
})

// 排序函数
const sortBooks = () => {
    if (value.value == '1')
        books.value.sort((a, b) => new Date(b.time_published) - new Date(a.time_published));
    else if (value.value == '2')
        books.value.sort((a, b) => b.reader_number - a.reader_number);
    else if (value.value == '3')
        books.value.sort((a, b) => new Date(b.time_updated) - new Date(a.time_updated));
    else if (value.value == '4')
        books.value.sort((a, b) => b.like_number - a.like_number);
}

// 初始加载第一页书籍
const loadBooks = async () => {
    if (keyword.value.trim()) {
        const results = await getSearchResults(keyword.value, proxy);
        console.log('前',results);
        books.value = results;
        console.log('后',books);
        totalBooks.value = results.length;
        sortBooks();
    }
}

onMounted(() => {
    loadBooks();
})

watch(() => route.params.input, (newInput) => {
    keyword.value = newInput;
    currentPage.value = 1;
    loadBooks();
});

watch(value, () => {
    sortBooks();
})

// 处理分页变化
function handlePageChange(newPage) {
    currentPage.value = newPage;
}  
</script>

<style scoped>
.search_select {
    padding: 50px 0 0 100px;
}

.search_box {
    display: flex;
    padding: 0 30px 0 30px;
}

.search_book {
    flex: 7;
    display: flex;
    flex-direction: column;
}

.search_recommend {
    flex: 3;
}

.search_book_item {
    padding: 30px;
    display: flex;
    align-items: center;
}

.search_img {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.search_bookInfo {
    height: 160px;
    width: 400px;
    margin: 0 0 0 50px;
    text-align: left;
}

.search_read_button {
    margin-left: 70px;
}

.search_bookCover {
    height: 160px;
    width: 120px;
    background-size: 100% 100%;
    border-radius: 7px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.search_bookCover:hover {
    transform: scale(1.1);
}

.search_pages {
    display: flex;
    justify-content: center;
    padding: 20px 0 20px 0;
}
</style>